<template>
  <div>
   <el-dialog
    v-model="tableselect"
    :title="title ? title :'选择标签'"
    width="40%"
    :before-close="handleClose"
    center
    >
    <div style="background-color:#f1f9ff;padding: 5px 10px;" v-if="tipsshow">
      <el-icon style="color:#1890ff"><BellFilled /></el-icon><span style="margin-left: 15px;">{{tips}}</span>
    </div>
    <div style="min-height: 400px;overflow: auto;" >
      <div v-if="!tipsshow">
        <!-- <el-input
          v-model="input1"
          class="w-50 m-2"
          placeholder="请输入要查找的标签或标签组"
          @keyup.enter.native="postTagListapi"
        > -->
        
        <!-- </el-input> -->
        <!-- <span class="chaxun" @click="postTagListapi"> <el-icon ><Search /></el-icon></span> -->
        <el-input v-model="input1" class="w-50 m-2" placeholder="请输入要查找的标签或标签组"  @keyup.enter.native="postTagListapi">
          <template #suffix>
            <el-icon class="el-input__icon" @click="postTagListapi"><Search /></el-icon>
          </template>
        </el-input>
        </div>
        <div style="margin-top: 15px;max-height: 600px;">
          <div v-for="(item,i) in tabledata" >
            <div @click="showapi(i)" >
              <el-icon v-if="!item.show"><CaretRight /></el-icon><el-icon  v-if="item.show"><CaretBottom /></el-icon><span>{{item.group_name}}</span>
            </div>
            <div class="label-list" @click="labeladd(item)" v-if="typeshow==2"><el-icon><Plus /></el-icon>添加</div>
            <span v-if="labeladdshow == item.group_id">
              <el-input v-model="input" placeholder="输入后回车" @keyup.enter.native="addleabel(item)" maxlength="15" style="width: 150px;" />
            </span>
            <div v-for="items in item.tag" v-if="item.show" :class="labelids.indexOf(items.tag_id) == -1 ? 'label-list' : 'label-lists'" @click="labelindex(items)">
              <div >{{items.tag_name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding-top: 15px;margin-bottom: 15px;">
        <span style="color: #409EFF;cursor:pointer;float: left;" @click="addlabelgroup" v-if="typeshow==2">
          <el-icon><Plus /></el-icon>新建标签组
        </span>
        <span style="float: right;">
          <el-button @click="tableselect=false">取消</el-button>
          <el-button type="primary" @click="addleabels">保存</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog
    v-model="labelgroup"
    title="新建标签组"
    width="40%"
    :before-close="handleClose"
    center
    >
    <div class="allStyle">
      <div class="dialogTSY">
          <el-icon style="color:#409eff">
            <BellFilled />
          </el-icon>
          <span style="color: #595959;">管理员可根据不同部门选择展示不同的标签组，部门管理员可创建部门可见的标签</span>
      </div>
      <div class="formStyle">
        <el-form ref="ruleFormRef" :model="ruleForm" >
          <el-form-item label="标签组名称:" label-width="150px" style="width: 500px">  
            <el-input v-model="ruleForm.biaoqianname" autocomplete="off" show-word-limit maxlength="15" />
          </el-form-item>
          <el-form-item label="标签名称:"  label-width="150px">
            <div style="display: flex;" class="content-item" v-for="(item, index) in ruleForm.rule" :key="index">
              <span>
                <el-input v-model="item.name"  autocomplete="off" style="margin-bottom: 10px;width: 350px;" show-word-limit
                  maxlength="15" />
              </span>
              <span style="" v-if="ruleForm.rule.length !== 1">
                <el-icon style="margin-left: 10px" @click="deleteInput(index)">
                  <Remove />
                </el-icon>
                <span style="margin-left: 10px" @click="popUp(index)">
                  <i class="iconfont"> &#xe61c;</i>
                </span>
                <span style="margin-left: 10px" @click="popDown(index)">
                  <i class="iconfont"> &#xe61b;</i>
                </span>
              </span>
            </div>
          </el-form-item>
          <el-form-item label-width="150px" @click="addInput">
            <p style="display: flex;margin-top: -10px;">
              <el-icon color="#1890ff">
                <CirclePlus />
              </el-icon>
            <p style="color: #1890ff;margin-top: -9px;margin-left: 3px;">添加标签</p>
            </p>
          </el-form-item>
        </el-form>
      </div>
      <div class="addBottmStyle">
        <el-button @click="cancelSubmit">取消</el-button>
        <el-button  type="primary" @click="onSubmit(ruleFormRef)" >确定</el-button>
      </div>
    </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref,reactive,defineExpose,onMounted,defineProps } from 'vue'
import { Calendar, Search,ArrowDownBold } from '@element-plus/icons-vue'
import { postTagList,postTagAdd,postTagAddGroup,postTagGrouplist,postTagTaglist } from '@/api'
const tableselect = ref(false)
const input1=ref()
const input=ref()
const labelgroup=ref(false)
const ruleFormRef = ref()
  const ruleForm = reactive({
    biaoqianname:'',
    rule: [ 
      { name: '' }
    ]
  });
  //定义参数 已经选中的ITEMID
const props = defineProps({
  labeldataapi: {
    type: Function,
    default: Function,
    required: true,
  }
})
const tabledata = ref([
  {
    tablename:'客户等级',
    value:[
      {
        id:1,
        name:'核心'
      },
      {
        id:2,
        name:'重要'
      },
      {
        id:3,
        name:'一般'
      },
    ],
    check:[],
    show:true
  }
])
const labelids=ref([])
const labellistdata=ref([])
const title = ref('')
const typeshow=ref('1')
const tips= ref('')
const tipsshow=ref('false')
//抛出方法用于父组件调用显示弹框
const tableshow=(val)=>{
  labelids.value=[]
  labellistdata.value=[]
  console.log(val)
  tableselect.value=val.show
  typeshow.value = val.type
  title.value=val.title
  tips.value=val.tips
  tipsshow.value=val.tipsshow
  postTagListapi(val)
}
const activeName = ref('1')
//显示隐藏子标签
const showapi=(val)=>{
  tabledata.value[val].show=!tabledata.value[val].show
}
const labeladdshow= ref(false)
//显示添加子标签输入框
const labeladd = (val)=>{
  labeladdshow.value=val.group_id
}
//子标签选中
const labelindex=(val)=>{
  
  if(labelids.value.indexOf(val.tag_id) !== -1){
    for(var i = 0;i<labelids.value.length;i++){
      if(labelids.value[i] == val.tag_id){
        labelids.value.splice(i,1)
        labellistdata.value.splice(i,1)
      }
    }
  }else{
    labelids.value.push(val.tag_id)
    labellistdata.value.push(val)
  }
}
//获取所有标签
const postTagListapi=(val)=>{
  if(typeshow.value == 2){
    postTagList({name:input1.value}).then(res=>{
      tabledata.value=res.data
      for(var i = 0;i<tabledata.value.length;i++){
        tabledata.value[i].show = true
      }
    })
  }else{
    postTagTaglist({name:input1.value}).then(res=>{
      tabledata.value=res.data
      for(var i = 0;i<tabledata.value.length;i++){
        tabledata.value[i].show = true
      }
      tableselect.value=val.show
    })
  }
  
}
//添加子标签
const addleabel=(val)=>{
  postTagAdd({group_id:val.group_id,tag_name:input.value}).then(res=>{
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    postTagListapi()
    input.value=''
  })
}
//新增标签组弹框
const addlabelgroup=()=>{
  labelgroup.value=true
}
   //添加群标签列表接口信息
  const onSubmit = async (formEl) => {
    console.log(formEl)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
          if (valid) {
         console.log('添加',ruleForm.rule)
         if(ruleForm.rule == ''){
          alert('标签名称不能为空')
         }else{}
          var data = []
        for(var i =0;i<ruleForm.rule.length;i++){
          data.push(ruleForm.rule[i].name)
        }
        postTagAddGroup({
          groupName:ruleForm.biaoqianname,
          tag:data
        }).then((res) => {
          ElMessage({ message: '提交成功', type: 'success' })
          labelgroup.value=false
          postTagListapi()
        })  
      } else {
        console.log('error submit!', fields)
        ElMessage({ message: '失败', type: 'error' })
      }	
    })
    
  }
    // 取消按钮
  const cancelSubmit =()=>{
    ruleForm.biaoqianname=''
    ruleForm.rule= [ 
      { name: '' }
    ]
    labelgroup.value=false
    // ElMessage({ message: '取消成功', type: 'success' })
    //       router.push('customerLabel')
  }
    // 添加子标签
  const addInput = () => {
    ruleForm.rule.push({ name: '' })
  }
  const deleteInput = (index) => {
    ruleForm.rule.splice(index, 1)
  }
    // 弹窗上移
  const popUp = (index) => {
    if (index != 0) {
      ruleForm.rule[index] = ruleForm.rule.splice(index - 1, 1, ruleForm.rule[index])[0];
    } else {
      ruleForm.rule.push(ruleForm.rule.shift());
    }
  }
  // 弹窗下移
  const popDown = (index) => {
    if (index != ruleForm.rule.length - 1) {
      ruleForm.rule[index] = ruleForm.rule.splice(index + 1, 1, ruleForm.rule[index])[0];
    } else {
      ruleForm.rule.unshift(ruleForm.rule.splice(index, 1)[0]);
    }
  }
  // 选中的值返回给父组件
  const addleabels=()=>{
    var data ={
      id:labelids.value,  //选中的子标签id
      list:labellistdata.value  // 选中的子标签数据
    }
    tableselect.value=false
    props.labeldataapi(data)
  }
// onMounted(() => {
//   postTagListapi()
// })
// postTagListapi()
defineExpose({
	tableshow
})
</script>
<style>
@import "../../style/iconfont.css";
.label-list{
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  background-color: #fafafa;
  color: #595959;
  margin: 5px;
  font-size: 13px;
  cursor:pointer;
}
.label-lists{
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #1890ff;
  background-color: #e3f6ff;
  color: #1684eb;
  margin: 5px;
  font-size: 13px;
  cursor:pointer;
}
.chaxun{
  position: absolute;
    top: 86px;
    right: 55px;
}

  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .allStyle {
    background-color: #ffffff;
    margin: 20px;
  }
  
  .dialogTSY {
    margin: 20px;
    display: flex;
    align-items: center;
    background-color: #effaff;
    padding: 8px 10px;
  }
  .dialogTSY span{
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    margin-left: 5px;
  }
  .formStyle {
    width: 700px;
    margin-top: 20px;
  }
  
  .addBottmStyle {
    float: left;
    margin-left: 30%;
    margin-bottom: 20px;
  }
</style>